<template>
  <view class="clientManage">
    <view class="informBarBox">
      <view class="informBar">
        <view class="informBarTxt" v-model="teamPeopleForm">
          截止到当前时间，共推荐了{{teamPeopleForm.numV0People + '' || '-'}}位好友注册成为普通用户
        </view>
      </view>
    </view>
    <view class="uChartsBox">
      <view class="">
        <chart chartType="ring" :opts="sexRingOption" style="margin: auto;" canvasId="u-sexring-canvas" ref="ringChart" :customStyle="{margin: '0 auto'}"></chart>
      </view>
    </view>
    <view class="myTime"  @click="uChartsClick">我的团队</view>
    <view class="clientBox">
      <view class="selectListBox">
        <view class="selectList">
          <view class="gradeSelect">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db" v-if="memberRank.length > 0">
                <picker :value="rankId" :range="memberRank" range-key="rankName" @change="bindPickerChange">
                  <view class="uni-input">{{memberRank[rankId].rankName}}</view>
                </picker>
              </view>
            </view>
          </view>
          <view class="statusSelect">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="statusChange" :value="flag" :range="statusList" range-key="statusName">
                  <view class="uni-input">{{statusList[flag].statusName}}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="clientList">
        <view class="clientItem" v-for="(item,index) in clientList" :key = "index">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 100rpx; height: 100rpx; border-radius: 50%;overflow:hidden;" :src="item.href" mode=""></image>
              </view>
              <view class="imgModel">{{item.qualificationRankName}}</view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">{{item.name}}</text>
                <text class="authentication">{{item.statusName}}</text>
              </view>
              <view class="clientItem-l-r-b">
                {{item.linkmanPhone}}
              </view>
            </view>
          </view>
          <view class="clientItem-r"  @click="clientItem(item)">
            <view class="clientItem-r-txt">
              <image style="width: 39rpx; height: 34rpx; vertical-align: middle;" :src="image" mode=""></image>
              <text class="team">团队</text>
            </view>
          </view>
        </view>
        <view class="loading" v-if="clientList && clientList.length == 0">
          <view class="loadingImg">暂无数据</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import chart from '@/components/u-charts/component.vue';
import { amountByInvite,rankByInvite,teamNum,teamByRank,userRank } from "@/service/clientManage/clientManage.service.js"
export default {
  components: { chart },
  data () {
    return {
      clientList: [],
      teamPeopleForm:{
        teamTotalPeople:'',
        numV0People:''
      },
      uWidth:380,
      uHeight:350,
      sexRingOption: {
        dataLabel:true, // 是否在图表中显示数据标签内容值
        background:'#3F4572', // 图标背景颜色
        ringWidth:20, // 设置圆环大小
        legend:{
          show:true, // 是否显示图例
          fontColor:'#FFFFFF',
          lineHeight:'15',
          float:'left'
        },
        "series": [],
      },
      rankId: 0,
      flag:0,
      memberRank: [{rankId:'', rankName: '全部类型'}],//等级
      statusList: [
        {flag: null,statusName:'全部状态'},
        {flag: 0,statusName:'审核中'},
        {flag: 1,statusName:'审核通过'},
        {flag: 2,statusName:'审核失败'},
        {flag: 3,statusName:'审核驳回'},
      ],
      image: this.$store.state.imgBaseUrl + '/team.png',
      loadingText: '加载中...',
      loadingFlag: false,
      pageInfo: {
        size: 10,
        current: 1,
        total:0,
        flag: null,
        qualificationRank: null
      },
      userId:''
    }
  },
  onLoad(option) {
    this.userId = option.id
  },
  onShow() {
    this.amountByInvites(this.userId);
    this.teamNums(this.userId);
    this.userRanks();
    this.rankByInvites(this.userId);
  },
  onReachBottom () {
    // 页面滚动到底部的事件
    if (this.pageInfo.current == 1) {
      return false;
    } else if (this.pageInfo.total > this.clientList.length) {
      this.rankByInvites(this.userId);
    } else if (this.pageInfo.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  methods: {
    // 获取列表数据
    rankByInvites (val) {
      uni.showLoading();
      let params = {
        size: this.pageInfo.size,
        current: this.pageInfo.current,
        flag: this.pageInfo.flag,
        qualificationRank: this.pageInfo.qualificationRank,
        searchUserId: val
      };
      rankByInvite(params,res => {
        if(res.status == 0) {
          if (this.pageInfo.current == 1) {
            this.clientList = res.data.records;
          } else {
            this.clientList = this.clientList.concat(res.data.records);
          }
          this.pageInfo.total = res.data.total;
          if (this.pageInfo.total > this.clientList.length) {
            this.pageInfo.current ++;
          }
        }
        uni.hideLoading();
      })
    },
    bindPickerChange (e) { //等级选择
      this.rankId = e.target.value;
      this.pageInfo.qualificationRank = this.memberRank[e.target.value].rankId;
      this.rankByInvites(this.userId);
    },
    statusChange (e) { // 状态选择
      this.flag = e.target.value;
      this.pageInfo.flag = this.statusList[e.target.value].flag;
      this.rankByInvites(this.userId);
    },
    async amountByInvites (val) {//图表数据
      let params = this.pageInfo;
      params.id = val;
      let seriesArr = [];
      let seriesObj = {};
      
      seriesArr = await amountByInvite(params);
      this.sexRingOption.series = [];
      seriesArr.forEach(e => {
        seriesObj = {
          data: e.proportion,
          name: e.rankName,
        };
        this.sexRingOption.series.push(seriesObj);
      });
      this.$refs['ringChart'].changeData('u-sexring-canvas', this.sexRingOption);
    },
    async teamNums (val) {//当前登录人信息
      let params = {};
      params.id = val;
      this.teamPeopleForm = await teamNum(params);
      // this.sexRingOption.title.name = this.teamPeopleForm.teamTotalPeople + '/人';
      this.$refs['ringChart'].changeData('u-sexring-canvas', this.sexRingOption);
    },
    // 点击列表项
    clientItem (item) {
      this.searchUserId = item.userId;
      uni.navigateTo({
        url: 'index?id=' + item.userId
      });
    },
    uChartsClick () {
      if (this.userId) {
        uni.navigateTo({
          url: 'myTeam?searchUserId=' + this.userId
        });
      } else {
        uni.navigateTo({
          url: 'myTeam'
        });
      }
    },
    userRanks () { //获取等级
      userRank({},res => {
        if(res.status == 0) {
          this.memberRank = res.data && res.data.length > 0 ? res.data : [];
          this.memberRank = [{rankId:'', rankName: '全部类型'}].concat(res.data);
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .clientManage {
    height: calc(100vh - 50px);
    padding-bottom: 100rpx;
    background-color: #32355B;
    .informBarBox {
      padding-top: 20rpx;
      .informBar {
        height: 67rpx;
        margin: 0 35rpx;
        // opacity:0.3;  //子元素会受影响  所以为父元素设置background: rgba(0,0,0,0.3)。代替opacity。
        background:rgba(255,241,234,0.3);
        border-radius:34rpx;
        .informBarTxt {
          font-size: 24rpx;
          line-height: 67rpx;
          text-align: center;
          color: #FFFFFF;
        }
      }
    }
    // .uChartsBox {
    //   position: relative;
    // }
    .myTime{
      position: absolute;
      right: 0;
      top: 460rpx;
      width:164rpx;
      height:50rpx;
      background:rgba(63,69,114,1);
      font-size:24rpx;
      font-weight:bold;
      color:rgba(250,250,250,1);
      border-bottom-left-radius: 25px;
      border-top-left-radius: 25px;
      text-align: center;
      line-height: 50rpx;
    }
    .clientBox {
      .selectListBox {
        overflow: hidden;
        .selectList {
          float: right;
          width: 50%;
          .gradeSelect {
            display: inline-block;
            height: 50rpx;
            width: 176rpx;
            background:rgba(63,69,114,1);
            border-radius:25rpx;
            line-height: 50rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: center;
          }
          .statusSelect {
            display: inline-block;
            width: 144rpx;
            height: 50rpx;
            margin-left: 30rpx;
            background:rgba(37,41,81,1);
            border-radius:25rpx;
            line-height: 50rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: center;
          }
        }
      }
      .clientList {
        margin-top: 43rpx;
        padding: 0 35rpx 100rpx 35rpx;
				background-color: #32355B;
        .clientItem {
          background-color: #3F4572;
          border-radius:13rpx;
          margin-top: 20rpx;    
          padding: 0 13rpx 0 22rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .clientItem-l {
            .clientItem-l-l {
              position: relative;
							vertical-align: top;
              display: inline-block;
              .clientItem-l-l-img {
                width: 100rpx;
                height: 100rpx;
              }
            }
            .imgModel {
              height: 25px;
              position: absolute;
              width: 50px;
              bottom: -1px;
              background:rgba(98,98,98,0.8);
              border-radius: 0 0 50px 50px;
              font-size: 22rpx;
              text-align: center;
              color:rgba(255,255,255,1);
            }
            .clientItem-l-r {
              display: inline-block;
              margin-left: 20rpx;
							vertical-align: middle;
              .clientItem-l-r-t {
                .name {
                  color: #FFFFFF;
                  font-size: 28rpx;
                }
                .authentication {
                  color: #FFA173;
                  font-size: 22rpx;
                  margin-left: 30rpx;
                }
              }
              .clientItem-l-r-b {
                font-size:22rpx;
                color:rgba(255,255,255,1);
                margin-top: 15rpx;
              }
            }
          }
          .clientItem-r {
            line-height: 128rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            .team {
              margin-left: 12rpx;
							vertical-align: middle;
            }
          }
        }
      }
      .loading {
        margin-top: 60rpx;
        text-align: center;
        font-size: 26rpx;
        color: #999999;
        .loadingImg {
          height:118rpx;
          // margin: 0 17px;
          line-height: 118rpx;
          background:rgba(63,69,114,1);
          border-radius:13px;
        }
      }
    }
  }
</style>
